<template>
  <div style="margin-left: 50px">
    <h2 style="padding: 10px">项目管理</h2>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="查找项目" name="first">
        <!--查找项目搜索框-->
        <template>
          <div>
            <el-input type="text" v-model="searchTerm" @input="search1" placeholder="搜索..." style="width: 300px"></el-input>
            <el-table :data="filteredData" style="width: 100%">
              <el-table-column prop="projectId" label="项目号">
                <template slot-scope="{ row }">
                  <td>{{ row.projectId }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="projectName" label="项目名">
                <template slot-scope="{ row }">
                  <td>{{ row.projectName }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="{ row }">
                  <td>{{ row.createTime }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="numberOfPeople" label="人数">
                <template slot-scope="{ row }">
                  <td>{{ row.numberOfPeople }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="250">
                <template slot-scope="scope">
                  <el-tag type="info" v-if="scope.row.status==='0'">未开始</el-tag>
                  <el-tag type="warning" v-else-if="scope.row.status==='1'">暂停中</el-tag>
                  <el-tag type="primary" v-else-if="scope.row.status==='2'">进行中</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.status==='3'">停工中</el-tag>
                  <el-tag type="success" v-else-if="scope.row.status==='4'">已完成</el-tag>
                  <el-tag v-else>未知</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>

      </el-tab-pane>
      <el-tab-pane label="查找塔机" name="second">
        <!--查找塔机搜索框-->
        <template>
          <div>
            <el-input type="text" v-model="searchTerm" @input="search2" placeholder="搜索..." style="width: 300px"></el-input>
            <el-table :data="towerCreaneData" style="width: 100%">
              <el-table-column prop="towerCraneId" label="塔机型号">
                <template slot-scope="{ row }">
                  <td>{{ row.towerCraneId }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="towerCraneName" label="塔机管理员">
                <template slot-scope="{ row }">
                  <td>{{ row.towerCraneName }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="projectId" label="塔机项目号">
                <template slot-scope="{ row }">
                  <td>{{ row.projectId }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="towerCraneCount" label="塔机工作量">
                <template slot-scope="{ row }">
                  <td>{{ row.towerCraneCount }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="250">
                <template slot-scope="scope">
                  <el-tag type="info" v-if="scope.row.status==='0'">未开始</el-tag>
                  <el-tag type="warning" v-else-if="scope.row.status==='1'">暂停中</el-tag>
                  <el-tag type="primary" v-else-if="scope.row.status==='2'">进行中</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.status==='3'">停工中</el-tag>
                  <el-tag type="success" v-else-if="scope.row.status==='4'">已完成</el-tag>
                  <el-tag v-else>未知</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>

      </el-tab-pane>
      <el-tab-pane label="查找工程电梯" name="third">
        <!--工程电梯搜索框-->
        <template>
          <div>
            <el-input type="text" v-model="searchTerm" @input="search3" placeholder="搜索..." style="width: 300px"></el-input>
            <el-table :data="engineeringElevatorsData" style="width: 100%">
              <el-table-column prop="engineeringId" label="电梯号">
                <template slot-scope="{ row }">
                  <td>{{ row.engineeringId }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="maintenance" label="电梯维修员">
                <template slot-scope="{ row }">
                  <td>{{ row.maintenance }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="projectId" label="电梯项目号">
                <template slot-scope="{ row }">
                  <td>{{ row.projectId }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="playTime" label="电梯工作时间">
                <template slot-scope="{ row }">
                  <td>{{ row.playTime }}</td>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="电梯状态" width="250">
                <template slot-scope="scope">
                  <el-tag type="info" v-if="scope.row.status==='0'">未开始</el-tag>
                  <el-tag type="warning" v-else-if="scope.row.status==='1'">暂停中</el-tag>
                  <el-tag type="primary" v-else-if="scope.row.status==='2'">进行中</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.status==='3'">停工中</el-tag>
                  <el-tag type="success" v-else-if="scope.row.status==='4'">已完成</el-tag>
                  <el-tag v-else>未知</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        </el-tab-pane>
      <el-tab-pane label="塔机实时数据处理" name="fourth">塔机实时数据处理</el-tab-pane>
      <el-tab-pane label="电梯实时数据处理" name="fifth">电梯实时数据处理</el-tab-pane>



    </el-tabs>

  </div>
</template>

<script>
export default {
  name:'p_limit',
  data() {
    return {

      // 项目列表
      activeName: 'first',
      loading: false,
      searchTerm: '',
      permissionRelations: [
        { projectId: '001',projectName: '工地项目1', createTime: '2024-03-01', numberOfPeople: 3, status: '0' },
        { projectId: '002',projectName: '工地项目2', createTime: '2024-03-05', numberOfPeople: 3, status: '2' },
        { projectId: '003',projectName: '工地项目3', createTime: '2024-03-08', numberOfPeople: 3, status: '1' },
        { projectId: '004',projectName: '工地项目4', createTime: '2024-03-09', numberOfPeople: 3, status: '4' },
        { projectId: '005',projectName: '工地项目5', createTime: '2024-03-10', numberOfPeople: 3, status: '3' },
        // Add more data as needed
      ],
      //塔机列表
      towerCrane : [
        { towerCraneId: 'Ea1',towerCraneName: '张三', projectId: '002', towerCraneCount: 3, status: '2' },
        { towerCraneId: 'Ea2',towerCraneName: '李四', projectId: '002', towerCraneCount: 5, status: '3' },
        { towerCraneId: 'Ea3',towerCraneName: '王五', projectId: '001', towerCraneCount: 2, status: '0' },
        { towerCraneId: 'Ea3',towerCraneName: '赵六', projectId: '003', towerCraneCount: 1, status: '1' },
        { towerCraneId: 'Ea4',towerCraneName: '吉吉国王', projectId: '004', towerCraneCount: 4, status: '4' },
        // Add more data as needed
      ],
      //工程电梯列表
      engineeringElevators : [
        { engineeringId: 'eng1',maintenance: '李四', projectId: '001', playTime: '8:00-18:00', status: '0' },
        { engineeringId: 'eng2',maintenance: '王六', projectId: '002', playTime: '7:00-18:00', status: '2' },
        { engineeringId: 'eng3',maintenance: '刘三', projectId: '003', playTime: '9:00-18:00', status: '1' },
        { engineeringId: 'eng4',maintenance: '李二', projectId: '004', playTime: '10:00-18:00', status: '4' },
        { engineeringId: 'eng5',maintenance: '张大', projectId: '005', playTime: '6:30-18:00', status: '3' },
        // Add more data as needed
      ],
    };
  },
  computed: {
    filteredData() {
      if (!this.searchTerm.trim()) {
        return this.permissionRelations;
      }
      return this.permissionRelations.filter(item => {
        return item.projectId.includes(this.searchTerm.trim()) || item.projectName.includes(this.searchTerm.trim());
      });
    },
    towerCreaneData() {
      if (!this.searchTerm.trim()) {
        return this.towerCrane;
      }
      return this.towerCrane.filter(item => {
        return item.towerCraneId.includes(this.searchTerm.trim()) || item.towerCraneName.includes(this.searchTerm.trim()) ||item.projectId.includes(this.searchTerm.trim());
      });
    },
    engineeringElevatorsData() {
      if (!this.searchTerm.trim()) {
        return this.engineeringElevators;
      }
      return this.engineeringElevators.filter(item => {
        return item.engineeringId.includes(this.searchTerm.trim()) || item.maintenance.includes(this.searchTerm.trim()) ||item.projectId.includes(this.searchTerm.trim());
      });
    }


  },

  methods: {
    search1() {
      // 可以在这里添加其他搜索相关的逻辑，比如触发搜索请求等
    }, search2() {
      // 可以在这里添加其他搜索相关的逻辑，比如触发搜索请求等
    }, search3() {
      // 可以在这里添加其他搜索相关的逻辑，比如触发搜索请求等
    },
    handleClick() {
      // 在这里添加你的点击处理逻辑
    }

  }
};


</script>
